<style>
	div {
		-webkit-border-radius: 5px;
		border: 1px solid #333;
		padding: 5px;
		width: 140px;
	}
</style>
<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		var message = "this bed is ";
		$(".actionlink").click(function(event){
			var whichBed = event.target.id;
			var result;
			if(whichBed == 'firstbed') {
				result = "too small!";
			} else if (whichBed == 'secondbed') {
				result = "too big!";
			} else {
				result = "just right!";
			}
			alert(message + result);
		});

	})
</script>
<body>
	You are Goldilocks. What would you like to do next?
	<div class="actionlink" id="firstbed">Try the first bed.</div>
	<div class="actionlink" id="secondbed">Try the middle bed.</div>
	<div class="actionlink" id="thirdbed">Try the last bed.</div>